<template>
	<div class="product">
		<div class="product-title">
			<div class="titlt-top">
				<label><b>{{adultprice}}</b>起/成人</label>
				<label v-if="childprice"><b>{{childprice}}</b>起/儿童</label>
				<label class="youxiabi">{{yxbTip}}</label>
				<span><img src="../../../../public/img/infoimg/i.png" ></span>
			</div>
			<div class="title-contxt">
				<label :class="{'hots':brandTag}">{{brandTag}}</label>
				{{product_name}}
			</div>
			<div class="title-sub_name">
				{{sub_name}}
			</div>
			<div class="title-liangdian">
				<ul>
					<li v-for="(item,index) in liangdian" :key="index">
						<template v-if="index<3">
							<label>{{item}}</label>
						</template>
					</li>
				</ul>
			</div>
			<div class="title-start">
				<div class="start-place-of-departure">
					<img src="../../../../public/img/infoimg/start.png" >
					<label>出发地：{{province}}</label>
				</div>
				<label>{{peopleCountLabelFull}}</label>
			</div>
		</div>
		<Bottom></Bottom>
		<!-- 优惠 -->
		<div class="product-discount">
			<div class="discount-contxt">
				<label>优惠</label>
				<div class="discount-contxt-centen">
					<ul>
						<li v-for="(item,index) in infoList" :key="index">
								<label>{{item}}</label>
						</li>
					</ul>
				</div>
				<i class="iconfont icon-jiantouyou"></i>
			</div>
			<div class="discount-contxt">
				<label>服务</label>
				<div class="discount-contxt-refund">
					<img src="../../../../public/img/infoimg/yes.png" >
					<label>支持退款</label>
					<img src="../../../../public/img/infoimg/yes.png" >
					<label>退订保障</label>
				</div>
				<i class="iconfont icon-jiantouyou"></i>
			</div>
		</div>
		<Bottom></Bottom>
		<div class="product-data">
			<!-- 选择日期 -->
			<div class="product-data-top">
				<span>选择日期</span>
				<div>
					<img src="../../../../public/img/infoimg/customized.png"/>
					<label>我要定制</label>
					<img src="../../../../public/img/infoimg/youjaintou.png"/>
				</div>
			</div>
			<div class="product-data-cente swiper">
				<ul class="swiper-wrapper">
					<li :class="['swiper-slide',{'default':!item.cornerTip,'centen-div-default':dataIndex==index}]" v-for="(item,index) in dateList" :key='index' @click="dataIndex=index">
						<div class="data-cente-li-div" v-if="item.cornerTip">
							<div class="data-cente-li-div-top">
								<label><em>{{item.day}}</em>/{{item.month}}月</label>
								<label>{{item.week=='周六'?'休':item.week=='周日'?'休':''}}</label>
							</div>
							<div class="data-cente-li-div-centen">
								<p>{{item.week}}</p>
								<label>￥<em :class="{'fontSize':dataIndex==index}">{{item.price}}</em>起</label>
							</div>
							<div class="data-cente-li-div-bottom">
								<label>{{item.cornerTip}}</label>
							</div>
						</div>
						<div class="data-cente-li-div2" v-else>
							<div class="data-cente-li-div-centen2">
								<img src="../../../../public/img/infoimg/shang.png" />
								<p>{{item.year}}</p>
								<p>年</p>
								<img src="../../../../public/img/infoimg/xai.png" />
							</div>
						</div>
					</li>
				</ul>
			</div>
			<div class="more-date">
				<p>更</p>
				<p>多</p>
				<p>日</p>
				<p>期</p>
			</div>
			<div class="product-data-bottom">
				<p>这是一个好日子适合出行哦~</p>
			</div>
		</div>
		<Bottom></Bottom>
	</div>
</template>
<script>
	import Bottom from './Bottom.vue';
	// 1.引入vue周期函数
	import {onMounted} from 'vue';
	// 2.引入swiper的动态组件
	import Swiper,{
		Autoplay,
		EffectCoverflow,
		EffectCube,
	}from 'swiper';
	//3.swiper组件应用配置
	Swiper.use([Autoplay,EffectCoverflow,EffectCube]);
	export default{
		name:'Product',
		data(){
			return{
				dataIndex:0,
				brandTag:'',//热门
				adultprice:'',//成人票价
				product_name:'',//图片标题
				yxbTip:'',//游侠币
				childprice:'',//儿童票价
				sub_name:'',//详情
				liangdian:[],//标语
				province:'',//出发地
				peopleCountLabelFull:'',//报名人数
				infoList:[],//满减优惠
				dateList:[],//日期时间
			}
		},
		components:{
			Bottom
		},
		setup(){
			onMounted(()=>{
				new Swiper('.product-data-cente',{
					slidesPerView : 'auto',
					slideToClickedSlide: true,
					centeredSlides : true,
					centeredSlidesBounds:true
				})
			})
		},
		created() {
			let id = this.$route.query.pid
			this.axios.get('https://m.youxiake.com/api/m/product/detail?pid='+id).then((res)=>{
				let data = res.data.data;
				this.product_name=data.product.product_name//标题
				this.brandTag=data.product.brandTag//热门
				this.adultprice=data.product.adultprice//成人票价
				this.yxbTip=data.product.yxbTip//游侠币
				this.childprice=data.product.childprice//儿童票价
				this.sub_name=data.product.sub_name//详情
				this.liangdian=data.product.liangdian//标语
				this.province=data.product.province//出发地
				this.peopleCountLabelFull=data.productCache.peopleCountLabelFull//报名人数
				this.infoList=data.productDiscounts.infoList//满减优惠
				this.dateList=data.dateList//日期时间
			}).catch((error)=>{
				console.log(error);
			})
		}
	}
</script>

<style scoped>
	*{
		list-style: none;
	}
	.product{
		width: 100%;
		overflow: hidden;
	}
	.product .product-title{
		margin: 0 auto;
		width: 95%;
		margin-top: 0.3rem;
	}
	.product .product-title .titlt-top{
		width: 95%;
		display: flex;
		margin: 0 auto;
		align-items: center;
		margin-bottom: 0.3rem;
	}
	.product-title .titlt-top label{
		margin-right: 0.2rem;
		color: #b5b5b5;
	}
	.product-title .titlt-top span{
		color: #ff7100;
		display: inline-block;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 0.3rem;
		height: 0.3rem;
	}
	.product-title .titlt-top span img{
		width: 100%;
		height: 100%;
	}
	.product-title .titlt-top .youxiabi{
		padding: 0 0.1rem;
		line-height: 0.55rem;
		border-radius: 0.15rem;
		color: #ff7100 !important;
		background-color: rgba(255, 241, 229, 1.0);
	}
	.product-title .titlt-top label b{
		font-size: 0.5rem;
		color: #ff7100;
		font-weight: bold;
	}
	.product .product-title .title-contxt{
		font-size: 0.44rem;
		font-weight: bold;
		line-height: 0.6rem;
	}
	.product-title .title-contxt .hots{
		font-size: 0.3rem !important;
		background:linear-gradient(60deg,#fff346, #ffd10d );
		padding: 0 0.1rem;
		line-height: 0.1rem;
	}
	.product-title .title-sub_name{
		margin-top: 0.3rem;
		line-height: 0.5rem;
		color: #747474;
	}
	.product-title .title-liangdian{
		margin-top: 0.2rem;
		width: 100%;
		align-items: center;
		display: flex;
		padding-bottom: 0.4rem;
		border-bottom: 1px solid #d5d5d5;
	}
	.title-liangdian ul{
		width: 100%;
	}
	.title-liangdian ul li{
		float: left;
	}
	.title-liangdian ul li label{
		margin-right: 0.16rem;
		border: 1px dashed #f7ccbb;
		padding: 0.2em 0.1rem;
		display: inline-block;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 0.2rem;
		color: #4b4b4b;
		
	}
	.fontSize{
		font-size: 0.4rem !important;
	}
	.title-start {
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 0.8rem;
		color: #646464;
	}
	.title-start .start-place-of-departure img{
		width: 0.3rem;
		height: 0.35rem;
	}
	.title-start .start-place-of-departure label{
		margin-left: 0.2rem;
	}
	.product-discount{
		width: 100%;
		line-height: 1.2rem;
	}
	.product-discount .discount-contxt {
		width: 95%;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		color: #8f8f8f;
	}
	.product-discount .discount-contxt i{
		font-size: 0.2rem;
	}
	.discount-contxt-centen{
		width: 80%;
		overflow: hidden;
	}
	.discount-contxt-centen ul li{
		float: left;
	}
	.discount-contxt-centen ul li label{
		margin-right: 0.16rem;
		border: 1px solid #ff7100;
		color: #ff9130;
	}
	.discount-contxt .discount-contxt-refund{
		width: 80%;
	}
	.discount-contxt .discount-contxt-refund img{
		width: 0.3rem;
		height: 0.3rem;
		margin-right: 0.1rem;
	}
	.discount-contxt .discount-contxt-refund label{
		margin-right: 0.2rem;
	}
	.product-data{
		width: 100%;
	}
	.product-data .product-data-top{
		width: 95%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		overflow: hidden;
		margin: 0 auto;
		line-height: 1rem;
	}
	.product-data .product-data-top span{
		font-size: 0.43rem;
		font-weight: bold;
	}
	.product-data-top div{
		display: flex;
		height: 0.6rem;
		align-items: center;
		border-radius: 0.15rem;
		background: rgba(240, 240, 240, 1.0);
	}
	.product-data-top div img:nth-child(1){
		width: 0.3rem;
	}
	.product-data-top div img{
		margin: 0 0.1rem;
		width: 0.25rem;
	}
	.product-data-cente{
		display: flex;
		width: 90%;
		margin: 0 auto;
		justify-content: space-between;
		align-items: center;
		float: left;
		margin-left: 2%;
	}
	.product-data-cente ul{
		width: 100%;
		margin-bottom: 0.5rem;
	}
	.product-data-cente ul li{
		float: left;
		width: 22.7%;
		margin-right: 0.2rem;
		text-align: center;
		border: 1px solid #e5e5e5;
	}
	.data-cente-li-div{
		width: 90%;
	}
	.centen-div-default{
		background-image: url(../../../../public/img/infoimg/date01.png);
		background-size: 110% 110%;
		background-repeat: no-repeat;
		background-position: center center;
		background-color: #D8D8D8;
	}
	.more-date{
		margin-top: 0.5rem;
		text-align: center;
		line-height: 0.4rem;
		float: right;
		height: 100%;
		width: 8% ;
	}
	.product-data-cente ul li .data-cente-li-div-top{
		display: flex;
		justify-content: space-between;
		line-height: 0.6rem;
	}
	.product-data-cente ul li .data-cente-li-div-top label{
		font-size: 0.2rem;
		font-weight: bold;
	}
	.product-data-cente ul li .data-cente-li-div-top label:last-child{
		color: #ff7100 ;
	}
	.product-data-cente ul li .data-cente-li-div-top label em{
		font-size: 0.38rem;
		
	}
	.product-data-cente .more-date{
		line-height: 0.45rem;
	}
	.product-data-cente ul li .data-cente-li-div-centen{
		line-height: 0.6rem;
	}
	.product-data-cente ul li .data-cente-li-div-centen label{
		color: #ff7100;
	}
	.product-data-cente ul li .data-cente-li-div-centen p{
		color: #8c8c8c;
	}
	.product-data-cente ul li .data-cente-li-div-centen label em{
		font-weight: bold;
		font-size: 0.2rem;
	}
	.product-data-cente ul li .data-cente-li-div-bottom{
		margin-top: 0.3rem;
		color: #ff7100;
		font-weight: bold;
		padding: 0.1rem 0;
		width: 110%;
		background: rgba(255, 241, 229, 1.0);
	}
	.data-cente-li-div2{
		color: #737373;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 2.5rem;
		font-size: 0.31rem;
	}
	.data-cente-li-div2-top{
		width: 100%;
	}
	.default{
		border: none !important;
	}
	.product-data-bottom{
		clear: both;
		width: 95%;
		background-color: #eeeeee;
		margin: 0 auto 0.5rem;
		border-radius: 0.5rem;
		line-height: 0.8rem;
		text-indent: 1em;
	}
	.data-cente-li-div-centen2 p:nth-child(3){
		margin-bottom: 0.1rem;
	}
	.data-cente-li-div-centen2 p:nth-child(2){
		margin-top: 0.05rem;
	}
</style>
